<template>
    <div  ref="buttonList" class="table-button-list" style="height:50px">
        <div v-if="children && children.length">
          <template v-for="(item,index) in children">
            {{item.props}}
            <component :key="item.prop" :is="components[item.type]" :options="item.optionsList" :prop="item.prop" v-bind="item.props" v-on="$listeners" v-model="fieldValue"></component>
          </template>
          
        </div>
    </div>
   
</template>
<script>
  import Sortable from 'sortablejs'
  import XdhFormItem from '@/widgets/xdh-form/xdh-form-item'

  import divider from '@/widgets/xdh-form/items/divider'
import input from '@/widgets/xdh-form/items/input'
import label from '@/widgets/xdh-form/items/label'
import image from '@/widgets/xdh-form/items/image'
import select from '@/widgets/xdh-form/items/select'
import radio from '@/widgets/xdh-form/items/radio'
import checkbox from '@/widgets/xdh-form/items/checkbox'
import cascader from '@/widgets/xdh-form/items/cascader'
import date from '@/widgets/xdh-form/items/date'
import Switch from '@/widgets/xdh-form/items/switch'
import number from '@/widgets/xdh-form/items/number'
import rate from '@/widgets/xdh-form/items/rate'
import slider from '@/widgets/xdh-form/items/slider'
import time from '@/widgets/xdh-form/items/time'
import upload from '@/widgets/xdh-form/items/upload'
import range from '@/widgets/xdh-form/items/range'
import tag from '@/widgets/xdh-form/items/tag'
import tags from '@/widgets/xdh-form/items/tags'
import button from '@/widgets/xdh-form/items/button'
import buttons from '@/widgets/xdh-form/items/buttons'
import dropdown from '@/widgets/xdh-form/items/dropdown'
import color from '@/widgets/xdh-form/items/color'
import editor from '@/widgets/xdh-form/items/editor'
import inputTag from '@/widgets/xdh-form/items/input-tag'
import iconInput from '@/widgets/xdh-form/items/icon-input'
import checkTree from '@/widgets/xdh-form/items/check-tree'
import aliasInput from '@/widgets/xdh-form/items/alias-input'
import locationInput from '@/widgets/xdh-form/items/location-input'
import tree from '@/widgets/xdh-form/items/tree'
// import { getParent, getExtendAttrs, normalOptions, normalDictOptions } from './utils'
// import { getPropByPath } from 'element-ui/src/utils/util'

const components = {
  switch: Switch,
  input,
  label,
  select,
  radio,
  checkbox,
  cascader,
  date,
  time,
  divider,
  number,
  rate,
  slider,
  upload,
  range,
  tag,
  tags,
  button,
  buttons,
  dropdown,
  color,
  editor,
  inputTag,
  tree,
  iconInput,
  checkTree,
  aliasInput,
  image,
  locationInput,
}


  export default {
    props: {
      inx: {
        type: Number,
        default: 0,
      },
      type: {
        type: String,
        default: 'input',
      },
      value: {
        type: String
      },
      prop: {
        type: [String, Number],
        required: true
      },
      children: {
        type: Array,
        default:()=>[]
      },
    },
    computed: {
      fieldValue: {
        get() {
          console.log(11111111)
          return this.value
        },
        set(val) {
          this.$emit('input', val)
        }
      }
    },
    mounted() {
      this.createSort();
    },
    created() {
      this.components = components
    },
     methods: {
         createSort(){ console.log(this.$refs.buttonList,this.prop)
            // const el = this.$refs.buttonList.$el.querySelectorAll('.table-button-list')[0];
            const el = this.$refs.buttonList;
           
            this.sortable = new Sortable(el, {
            group: {
                // 只允许放置shared的控件,禁止pull
                put: ['shared']
            },
            sort: false,
            onAdd: (e) => {
              
                // this.setSort();
                // console.log(e, '+++++++++++++++++++++', e.newIndex)
                const item = e.item._underlying_vm_
                console.log(item,'这里加入子组件',e.newIndex)
                if (item) {
                  this.handleDrops(item, e.newIndex)
                }
            }
            })
         },
         handleDrops(item, index) {
          console.log(item, index)
          if (item) {
            const defaultName = `${item.type}_${new Date().getTime()}`
            const newItem = {
              ...item,
              label: item.title,
              prop: defaultName,
              value: item.value,
              type: item.type,
            }
            console.log(newItem)
            this.$store.commit('addButtonListField', { field: newItem, index: index,tab:this.inx })
          }
        },
     }
  }
</script>